<template>
	<view class="page">
		<!-- <u-navbar title='任务列表' left-icon-color="white" :autoBack="true" :titleStyle="{color:'white'}"
			bgColor="transparent"></u-navbar> -->
		<image
			src="https://renovationcdn.jiachuangnet.com/index/indexBg.png"
			class='bg' style=""></image>
		<view class="search_box" >
			<view :class="[loginType==0 ?'rangeBtn1':'rangeBtn']" @click="showRange=true">
				<u-icon name="map-fill" color="#e7f4f5" size="18" ></u-icon>
				<view >{{province||'全部'}}</view>
			</view>
			<view class="rangeBtn1" @click="showCompanyName=true" v-if="loginType==0">
				<u-icon name="home-fill" color="#e7f4f5" size="18" ></u-icon>
				<view >{{companyName||'全部'}}</view>
			</view>
			<view class="search">
				<u--input v-model="searchKey" @change="deChange" color="#e7f4f5" placeholder="请输入搜索关键字" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #e7f4f5;" ></u--input>
			</view>
			
			
		</view>
		<view :class="['container',list.length===0?'container_h':'']" style="">
			<view style="width: 100%;height: 50vh;" v-if="list.length===0">
				<u-empty
				        mode="data"
				        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
						width="100%"
						height="100%"
				>
				</u-empty>
			</view>
			
			<view v-for="(v,i) in list" :key='i' class="item" @click="toDetails(v)">
				<!-- 未开始 -->
				<image v-if="!v.status||v.status == 0"
					src="https://renovationcdn.jiachuangnet.com/index/weikaishi.png"
					style="width: 103rpx;height:89rpx;position: absolute;top:20rpx;right:150rpx">
				</image>
				<view v-if="v.status==1">
					<!-- 进行中 -->
					<image
						src="https://renovationcdn.jiachuangnet.com/day.png"
						style="width: 103rpx;height:89rpx;position: absolute;top:20rpx;right:150rpx">
					</image>
					<view class="day" style="width: 103rpx;position: absolute;top: 20rpx; vertical-align: middle;right: 150rpx;">
						第{{v.day|numberToChanieFilter}}天
					</view>
				</view>
				<!-- 已逾期 -->
				<image v-if="v.status == 2"
					src="https://renovationcdn.jiachuangnet.com/index/yiyuqi.png"
					style="width: 103rpx;height:89rpx;position: absolute;top:20rpx;right:150rpx">
				</image>
				<!-- 已完成 -->
				<image v-if="v.status == 3"
					src="https://renovationcdn.jiachuangnet.com/index/yiwancheng.png"
					style="width: 103rpx;height:89rpx;position: absolute;top:20rpx;right:150rpx">
				</image>
				<!-- 已丈量 -->
				<!-- <image v-if="v.state == 1"
					src="http://skv5jh74d.hn-bkt.clouddn.com/index/yizhangliang.png?e=1728109963&token=Uw65xcftwz9gmAL88CkCQDOLnHuqiD5jAvGQ7msg:l1k0IeRK_aDDbMg_n6bfPnRaEeA="
					style="width: 103rpx;height:89rpx;position: absolute;top:20rpx;right:150rpx">
				</image> -->
				
				
				

				<view class="itemHeader flex bewteen alignItem">
					<view class="flex alignItem">
						<image style="width: 30rpx;height: 30rpx"
							src="https://renovationcdn.jiachuangnet.com/index/homeIcon.png">
						</image>
						<view style="font-size: 30rpx;font-weight: 700;" class="left20">{{v.assignName}}</view>
					</view>
					<u-icon name="arrow-right" size="14"></u-icon>
				</view>
				<view class="top30 flex alignItem bewteen paddingLeftRight20">
					<view class="label">姓名</view>
					<view class="val">{{v.projectUserName}}</view>
				</view>
				<view class="top30 flex alignItem bewteen paddingLeftRight20">
					<view class="label">电话</view>
					<view class="val">{{v.projectPhone}}</view>
				</view>
				<view class="top30 flex alignItem bewteen paddingLeftRight20">
					<view class="label">时间</view>
					<view class="val">{{v.createTime}}</view>
				</view>
				<view class="top30 flex alignItem bewteen paddingLeftRight20">
					<view class="label">地址</view>
					<view class="val">{{v.address}}</view>
				</view>

				<view class="flex alignItem bewteen" style="border-top: 1rpx solid #eee;margin-top:20rpx">
					<view class="top30 flex alignItem bewteen paddingLeftRight20 paddingBottom20">
						<view class="label label_1">CAD</view>
						<view class="val val_1" style="width: auto;" v-if="v.cadUrl" :style="{'color':color}">已上传</view>
						<view class="val val_1" style="width: auto;" v-else :style="{'color':'#f56c6c'}">未上传</view>
					</view>
					<view class="top30 flex alignItem bewteen paddingLeftRight20 paddingBottom20">
						<view class="label label_1">立面图</view>
						<view class="val val_1" style="width: auto;" v-if="v.elevations" :style="{'color':color}">已上传</view>
						<view class="val val_1" style="width: auto;" v-else :style="{'color':'#f56c6c'}">未上传</view>
					</view>
					<view class="top30 flex alignItem bewteen paddingLeftRight20 paddingBottom20" v-if="loginType!=4">
						<view class="label label_1">验收</view>
						<view class="val val_1" style="width: auto;" v-if="v.chargeScore"
							:style="{'color':v.chargeScore  && v.chargeScore > 70 ? color:'#f9ae3d'}">{{v.chargeScore}}分
						</view>
						<view class="val val_1" style="width: auto;" v-else :style="{'color':'#f56c6c'}">
							{{v.chargeScore || '待验收'}}
						</view>
					</view>
					<view class="top30 flex alignItem bewteen paddingLeftRight20 paddingBottom20">
						<view class="label label_1">评价</view>
						<view class="val val_1" style="width: auto;" v-if="v.customerScore"
							:style="{'color':v.customerScore && v.customerScore > 7 ? color: '#f9ae3d'}">{{v.customerScore}}分</view>
						<view class="val val_1" style="width: auto;" v-else :style="{'color':'#f56c6c'}">
							{{v.customerScore || '待评价'}}
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" v-show="list.length!=0"></uni-load-more>
			<view class="add">
				<image v-if="loginType==0||loginType==1" @click="addClick"  class="add_item" src="https://renovationcdn.jiachuangnet.com/tabbar/add.png"></image>
				<!-- <image  @click="searchShow=true"  class="add_item" src="https://renovationcdn.jiachuangnet.com/tabbar/add.png"></image> -->
			</view>
			
		</view>
		<!-- 对任务条件搜索 -->
		<u-picker :show="showCompanyName" :columns="columns1" @cancel="showCompanyName=false" @confirm="searchHandler1"></u-picker>
		<!-- 对任务条件搜索 -->
		<u-picker :show="showRange" :columns="columns" @cancel="showRange=false" @confirm="searchHandler"></u-picker>
	</view>
</template>
<script>
	let app = getApp();
	 
	import { numberToChanie } from '../../util.js'
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
			 
				pageNumber: 1,
				pageSize: 5,
				total:1,
				list: [],
				status:'',
				loginType:null,
				isLogin:'',
				showRange:false,
				province:null,
				showCompanyName:false,
				companyName:null,
				companyId:null,
				columns1:[],
				companyList:null,
				columns:[
					[
					    "全部","北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省", 
					    "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", 
					    "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", 
					    "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", 
					    "贵州省", "云南省", "西藏自治区", "陕西省", "甘肃省", "青海省", 
					    "宁夏回族自治区", "新疆维吾尔自治区", "香港特别行政区", 
					    "澳门特别行政区", "台湾省"
					]
				],
				searchKey:''
			}
		},
		 
		onShareAppMessage(res) {
			return {
				title: '速工装装修',
				path: '/pages/index/index',
			}
		},
		onPullDownRefresh() {
			this.pageNumber=1
			this.list=[]
			this.getTaskList()
		},
		onLoad() {
			uni.setStorageSync('isLogin', 'yes')
		},
		onShow() {
			this.getUserInfo();
			this.pageNumber=1
			this.list=[]
			this.getTaskList()
			this.loginType= uni.getStorageSync('loginType')
			this.isLogin= uni.getStorageSync('isLogin')==='yes'?true:false
			if(this.loginType==0){
				console.log(this.loginType,'0000000')
				this.getCompanyListMini()
			}
		},
		onReachBottom(){
			if(this.list.length>=this.total){
				this.status='noMore'
				return
			}
			this.pageNumber++
			this.getTaskList()
		},
		filters:{
			numberToChanieFilter(num){
				return numberToChanie(num)
			}
		},
		methods: {
			deChange(){
				uni.$u.debounce(this.change, 1000)
				
			},
			change(){
				this.pageNumber=1
				this.list=[]
				this.getTaskList()
			},
			searchHandler1(e){
				console.log(e)
				if(e.value[0]=='全部'){
					this.companyName=null
					this.companyId=null
				}else{
					this.companyName=e.value[0]
					
					this.companyId=this.companyList[e.indexs[0]-1].companyId
				}
				this.showCompanyName=false
				this.pageNumber=1
				this.list=[]
				this.getTaskList()
			},
			searchHandler(e){
				if(e.value[0]=='全部'){
					this.province=null
				}else{
					this.province=e.value[0]
				}
				this.showRange=false
				this.pageNumber=1
				this.list=[]
				this.getTaskList()
			},
			addClick(){
				if(!this.isLogin) return uni.$u.toast('请先登录:)')
				if(this.loginType==0||this.loginType==1){
					uni.navigateTo({
						url:'/pages/createTask/index'
					})
				}else{
					uni.$u.toast('无管理员权限:)')
				}
				
			},
			getTaskList() {
				this.status='loading'
				const params = {
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					province:this.province,
					assignName:this.searchKey,
					companyId:this.companyId||null
				}
				uni.$u.http.post('/assign/getAssignTaskList', params).then(async res => {
					console.log(res,'获取任务列表')
					if(res){
						this.list=[...this.list,...res.data]
						this.total=res.total
						if(this.list.length>=this.total){
							this.status='noMore'
						}else{
							this.status='more'
						}
					}
					uni.stopPullDownRefresh()
				})
			},
			toDetails(msg) {
				// uni.navigateTo({
				// 	url: `/pages/details/index?status=${msg.status}&assignTaskId=${msg.assignTaskId}&assignName=${msg.assignName}&createTime=${msg.createTime}&address=${msg.address}&customerScore=${msg.customerScore}&projectUserName=${msg.projectUserName}&userName=${msg.userName}&customerPhone=${msg.customerPhone}&userPhone=${msg.userPhone}&chargePhone=${msg.chargePhone}&projectPhone=${msg.projectPhone}&afterPhone=${msg.afterPhone}`
				// })
				uni.navigateTo({
					url:`/pages/details/index?assignTaskId=${msg.assignTaskId}`
				})
			},
			toPath() {
				uni.navigateTo({
					url: '/pages/noticeDetail/index',
				})
			},
			getCompanyListMini(){
				uni.$u.http.get('/company/getCompanyListMini',{
					params:{
						pageNumber:1,
						pageSize:999999,
					}
				}).then((res)=>{
					if(res.data){
						console.log(res.data)
						this.companyList=res.data
						const comanyListArr=res.data.map(item=>item.companyName)
						this.columns1=[['全部',...comanyListArr]]
						console.log(comanyListArr,this.columns1[0])
					}
					
				})
			},
			getUserInfo() {
				uni.$u.http.get('/user/userInfo').then(async res => { 
					if (res) {
						console.log(res)
						this.isLogin = true;
					 
						uni.setStorageSync('avatar', res.avatar)
						uni.setStorageSync('nickName', res.nickName)
						uni.setStorageSync('roleId', res.roleId)
						uni.setStorageSync('userId', res.userId)
						uni.setStorageSync('loginType',res.loginType)
						this.loginType= res.loginType
					} else {
						this.isLogin = false
						 
					}
				})
			},


		}
	}
</script>
<style>
	page {
		background: #f8f8f8;
		font-size: 12px;
		height: 100vh;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	.search_box{
		display: flex;
		position: absolute;
		top: 100rpx;
		left: 0;
		right: 0;
		z-index: 2;
		.rangeBtn{
			width: 150rpx;
			color: #e7f4f5;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 10rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.rangeBtn1{
			width: 150rpx;
			color: #e7f4f5;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 10rpx 0 25rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			
		}
		.search{
			width: 400rpx;
			border-radius: 40rpx;
			
		}
		
	}
	
	.add{
		display: flex;
		flex-direction: column;
		position: fixed;
		top:85vh;
		right:20rpx;
		transform: translate(-50%,0);
		.add_item{
			width:94rpx;
			height: 94rpx;
			margin-bottom: 20rpx;
		}
	}
	.val_1{
		width: auto;
		text-align: unset;
	}
	.label_1{
		width: auto;
		margin-right: 5rpx;
	}
	.day{
		text-align: center;
		line-height:89rpx;
		font-weight: 700;
		font-size: 16rpx;
		color: #fff;
		transform: rotate(-20deg);
		vertical-align: middle;
		  word-break:keep-all;
		  white-space:nowrap; 
	}
	.container {
		width: 700rpx;
		padding: 0;
		position: absolute;
		top: 350rpx;
		left: 25rpx;
		z-index: 10000;
		// min-height: 100vh;
		padding-bottom: 200rpx;
	}
	.container_h{
		padding-bottom: unset;
		min-height: unset;
	}
	.bg {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.item {
		width: 700rpx;
		// height: 342rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: white;
		margin-bottom: 20rpx;
		position: relative;
	}

	.itemHeader {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background: linear-gradient(to right, #e7f4f5, #fff);
	}

	.flex {}
</style>